<template>
  <view class="Demo">
    <view
      class="Before"
      :class="state.isTop ? 'contain-Before' : ''"
      @click="handleBefore"
    >
      <view class="sc-10">
        <!-- <view
          class="top-tip"
          :style="{
            backgroundColor:
              props.obj.is_opened_text === '未打开' ? '#18b566' : '',
            color: props.obj.is_opened_text === '未打开' ? '#fff' : ''
          }"
        >
          <u-icon name="clock" size="28"></u-icon>
          {{ props.obj.sale_status_text || props.obj.is_opened_text }}
        </view> -->
        <view v-if="props.type === '0'" class="nums_icon"
          >x{{ props.obj.number_count }}</view
        >
        <view class="sc-11"
          ><image
            :src="
              props.type === '0'
                ? props.obj.collection_image
                : props.obj.box_image
            "
          ></image
        ></view>
        <view class="sc-17">
          <view class="sc-12">{{
            props.type === '0' ? props.obj.collection_name : props.obj.box_name
          }}</view>

          <view class="tip">
            <view class="tip-l">{{
              props.type === '0' ? '星艺藏品' : '星艺盲盒'
            }}</view>
            <view
              class="tip-r"
              v-if="props.type === '1' && props.obj.collection_no != '0'"
            >
              <view class="tip-r-l">编号</view>
              <view class="tip-r-r">{{ props.obj.collection_no }}</view>
            </view>
          </view>
          <view
            class="button"
            v-if="props.type === '0' && props.obj.sale_status == 1"
          >
            <u-button
              style="width: 90%"
              :ripple="true"
              size="mini "
              shape="circle"
              @click="consignment"
              :custom-style="state.customStyle"
              >寄售</u-button
            >
          </view>
          <view
            class="button"
            v-if="props.type === '0' && props.obj.sale_status == 2"
          >
            <u-button
              style="width: 90%"
              :ripple="true"
              size="mini "
              shape="circle"
              @click="cancelConsignment"
              >取消寄售</u-button
            >
          </view>
          <view class="button" v-if="props.type === '1'">
            <u-button
              v-if="props.obj.is_opened === '0'"
              style="width: 90%"
              :ripple="true"
              size="mini "
              shape="circle"
              @click="open"
              :custom-style="state.customStyle"
            >
              打开
            </u-button>
          </view>
          <view class="goods_nums">
            <text>数量</text>
            <text>x{{ props.obj.number_count }}</text>
          </view>
          <view class="sc-14" v-if="props.type === '0'">
            <view class="sc-16"
              >¥
              {{
                props.obj.collection_price
                  ? props.obj.collection_price
                  : '暂无价格'
              }}</view
            >
          </view>
        </view>
      </view>
    </view>

    <!-- 旋转后 After-->
    <view
      class="After"
      :class="state.isTop ? 'contain-After' : ''"
      style="font-size: 20px; color: black"
    >
      <view class="sc-10">
        <view class="sc-11"
          ><image :src="props.obj.collection_image"></image
        ></view>
        <!-- <view v-if="props.type === '0'" class="nums_icon">x99</view> -->
        <view class="sc-17">
          <view class="sc-12">{{ props.obj.collection_name }}</view>

          <view class="tip">
            <view class="tip-l">{{
              props.type === '0' ? '星艺藏品' : '星艺盲盒'
            }}</view>
            <view
              class="tip-r"
              v-if="props.type === '1' && props.obj.collection_no != '0'"
            >
              <view class="tip-r-l">编号</view>
              <view class="tip-r-r">{{ props.obj.collection_no }}</view>
            </view>
          </view>

          <view class="sc-14" v-if="props.type === '0'">
            <view class="sc-16"
              >¥ {{ props.obj.price ? props.obj.price : '暂无价格' }}</view
            >
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="fire" v-if="state.isSuccess"><Fire></Fire></view>
  <u-popup mode="center" v-model="state.consignmentShow" closeable>
    <view class="consignmentShow">
      请输入价格
      <u-input
        style="margin-top: 50rpx"
        v-model="state.consig"
        placeholder="请输入价格"
        type="number"
        :border="true"
      />
      <u-button
        :custom-style="state.customStyle"
        style="margin-top: 50rpx"
        type="success"
        @click="consignmentSubmit"
        >确定</u-button
      >
    </view>
  </u-popup>
</template>
<script setup lang="ts">
import {
  openBox,
  consignmentNumber,
  cancelConsignmentNumber
} from '@/api/modules/user'
import { reactive } from 'vue'
import Fire from '@/components/Fire/index.vue'
const props = defineProps({
  obj: {
    type: Object,
    default: {}
  },
  //c藏品0还是盲盒1
  type: {
    type: String,
    default: '0'
  }
})
// console.log('props.obj', props.obj)
const emit = defineEmits(['open'])
const state = reactive({
  consig: '',
  consignmentShow: false,
  isTop: false,
  isSuccess: false,
  customStyle: {
    backgroundImage: 'linear-gradient(to right, #7e50d7, #2138cd)',
    color: '#fff',
    width: '50%'
  },
  show: false
})
//打开盲盒
const open = () => {
  openBox({ box_number_id: props.obj.id }).then((result) => {
    uni.showToast({
      title: '打开成功'
    })
    state.isSuccess = true
    setTimeout(() => {
      state.isSuccess = false
      emit('open')
    }, 3000)
  })
}
//寄售
const consignment = () => {
  state.consignmentShow = true
}
const consignmentSubmit = () => {
  if (!state.consig) return
  consignmentNumber({ number_id: props.obj.id, price: state.consig })
    .then((result) => {
      uni.showToast({
        title: '寄售成功'
      })
      props.obj.sale_status = 2
      props.obj.sale_status_text = '寄售中'
      state.consignmentShow = false
    })
    .catch((err) => {
      uni.showToast({
        title: err.data.message,
        icon: 'error'
      })
    })
}
//取消寄售 cancelConsignmentNumber
const cancelConsignment = () => {
  cancelConsignmentNumber({ number_id: props.obj.id }).then((result) => {
    uni.showToast({
      title: '取消成功'
    })
    props.obj.sale_status = 1
    props.obj.sale_status_text = '未寄售'
  })
}

//methods中的方法
const handleBefore = () => {
  if (props.type === '0') {
    uni.navigateTo({
      url: `/pages/my/collectionList/collectionList?collection_id=${props.obj.collection_id}`
    })
  }
  if (props.obj.is_opened === '1') {
    //已经打开
    if (!state.isTop) {
      state.isTop = true
      setTimeout(() => {
        state.isTop = false
      }, 2000)
    }
  }
}

// const handleAfter = () => {
//   if (state.isTop) {
//     state.isTop = false
//   }
// }
</script>
<style lang="scss" scoped>
.consignmentShow {
  padding : 50rpx;
  font-size : 35rpx;
  font-weight : 600;
}
.fire {
  position : absolute;
  top : 0;
  right : 0;
  left : 0;
  bottom : 0;
}
::v-deep(.u-hairline-border) {
  ::after {
    border : none !important;
  }
}
.button {
  position : absolute;
  display : flex;
  width : 150rpx;
  justify-content : center;
  bottom : 48rpx;
  right : 10rpx;
}
.sc-10 {
  position : relative;
  background : #231F30;
  border-radius : 26upx;
  overflow : hidden;
  margin-top : 40rpx;
  background-image : url(../../../static/images/cangpin.png);
  background-size : 100% 100%;
}

.sc-10 > image {
  position : absolute;
  top : 0;
  left : 0;
  width : 100%;
  height : 100%;
}
.nums_icon {
  position : absolute;
  top : 0;
  left : 0;
  width : 54rpx;
  height : 34rpx;
  line-height : 34rpx;
  text-align : center;
  font-size : 20rpx;
  background : linear-gradient(148deg, #FFD279 0%, #F6D58A 100%);
  border-radius : 24rpx 0rpx 24rpx 0rpx;
  opacity : .6;
  z-index : 10;
}
.goods_nums {
  margin : 20rpx 10rpx 10rpx 10rpx;
  display : flex;
  justify-content : space-between;
  font-size : 22rpx;
  color : #CCCCCC;
}
.sc-11 {
  width : 100%;
}

.sc-11 image {
  user-select : none;
  pointer-events : none;
  width : 100%;
  height : 332rpx;
  display : block;
  border-radius : 30rpx;
}

.sc-17 {
  padding : 0 25rpx;
  margin-bottom : 50rpx;
  box-sizing : border-box;
  .tip {
    display : flex;
    padding-top : 18px;
    font-size : 22rpx;
    .tip-l {
      width : 120rpx;
      height : 40rpx;
      background-image : linear-gradient(to right, #9F56FF, #9F56FF);
      border-radius : 10rpx;
      line-height : 40rpx;
      text-align : center;
      color : #FFFFFF;
    }
    .tip-r {
      display : flex;
      margin-left : 20rpx;
      width : 200rpx;
      .tip-r-l {
        width : 60rpx;
        background : #C63BF8;
        line-height : 40rpx;
        text-align : center;
        color : #FFFFFF;
      }
      .tip-r-r {
        flex : 1;
        background : #68637E;
        line-height : 40rpx;
        text-align : center;
        color : #FFFFFF;
      }
    }
  }
  .logo {
    padding-top : 20rpx;
    text-align : left;
    color : #FFFFFF;
    display : flex;
    align-items : center;
  }
}

.sc-12 {
  color : #FFFFFF;
  margin-top : 18upx;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  text-align : left;
  font-size : 30rpx;
}

.sc-14 {
  width : 100%;
  height : 50upx;
  line-height : 50upx;
  margin-top : 20rpx;
}

.sc-14:nth-child(2) {
  margin-top : 30rpx;
}

.sc-14:last-child {
  margin-bottom : 30rpx;
}

.sc-16 {
  text-align : left;
  font-size : 40rpx;
  color : #FFFFFF;
}
.top-tip {
  font-size : 25rpx !important;
  color : #8B8B8B;
  position : absolute;
  top : 20rpx;
  left : 10rpx;
  z-index : 2;
  background-color : #070707;
  width : 180rpx;
  height : 50rpx;
  line-height : 50rpx;
  border-radius : 20rpx;
}

.Demo {
  width : 350rpx;
  height : 620rpx;
  margin-bottom : 40rpx;
  /* margin-left: 500px; */
  position : relative;
  perspective : 800rpx;
  box-sizing : border-box;
}
.Before {
  width : 100%;
  height : 100%;
  position : absolute;
  top : 0;
  left : 0;
  transition : 1.5s;
}
.After {
  width : 100%;
  height : 100%;
  position : absolute;
  top : 0;
  left : 0;
  transform : rotateY(-180deg);
  backface-visibility : hidden;
  transition : 1.5s;
}
.Demo .contain-Before {
  transform : rotateY(180deg);
}
.Demo .contain-After {
  transform : rotateY(0deg);
}

</style>
